<template>
	<view class="page">

		<view class="menu-tabs">
			<uni-segmented-control :current="currentIndex" :values="tabsValues" @clickItem="onMenuItem"
				styleType="button" activeColor="#007aff"></uni-segmented-control>
		</view>

		<kittly-list :dataList="dataList" :isLoading="isLoading" :isHasMore="isHasMore" :isEmpty="isEmpty" />

		<view v-show="fixed" class="field">
			<view @click="onRefresh" class="item">
				<uni-icons type="loop" size="40" color="#888"></uni-icons>
			</view>
			<view @click="onTopBack" class="item">
				<uni-icons type="up" size="40" color="#888"></uni-icons>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		computed
	} from "vue";
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app";

	// 
	const currentIndex = ref(0); // 被激活的 tab
	const Tabs = [ // tab 栏的对象数组
		{
			key: "all",
			value: "全部"
		},
		{
			key: "cat",
			value: "猫猫"
		},
		{
			key: "dog",
			value: "狗狗"
		},
	];
	const tabsValues = computed(() => Tabs.map(item => item.value)); // 计算属性获取新的 value 数组
	const tabsType = ref("all"); // 获取宠物的类型

	const dataList = ref([]); // 数据列表
	const page = ref(1); // 页码
	const isLoading = ref(false); // 加载状态
	const isHasMore = ref(true); // 是否有更多数据可加载
	const isEmpty = ref(true); // 数据是否为空

	const fixed = ref(false); // 刷新、返回顶部 按钮的显示

	// 
	onLoad(() => {
		console.log("~~~监听页面加载的生命周期");
		getData();
	});

	// 
	onPullDownRefresh(() => {
		console.log("~~~监听用户下拉动作的生命周期");
		onRefresh();
	});

	// 
	onReachBottom(() => {
		if (isHasMore.value) {
			console.log("~~~页面滚动到底部的生命周期");
			getData();
		}
	});

	// 
	onPageScroll((e) => {
		// console.log("~~~监听页面滚动的生命周期");
		fixed.value = e.scrollTop > 200;
	});

	// 
	const onMenuItem = (e) => {
		currentIndex.value = e.currentIndex;
		tabsType.value = Tabs[currentIndex.value].key;
		onRefresh();
		console.log("~~~点击选项栏获取分类数据", e.currentIndex, tabsType.value);
	};

	// 
	const getData = () => {
		console.log("~~~获取数据");
		isLoading.value = true;
		uni.showNavigationBarLoading();
		uni.showLoading({
			title: "加载中..."
		});

		uni.request({
			url: `https://tea.qingnian8.com/tools/petShow`,
			data: {
				size: 10,
				type: tabsType.value,
			},
			method: "GET",
			header: {
				'access-key': "020313key"
			},

			success: res => {
				console.log(`~~~ page = ${page.value}`);

				let newList = [...dataList.value];
				if (page.value === 1) newList = [];
				dataList.value = newList.concat(res.data.data || []);
				isLoading.value = false;
				isHasMore.value = res.data.data && res.data.data.length >= 10;
				isEmpty.value = dataList.value.length <= 0;
				page.value++;
				// console.log("~~~数据长度：", dataList.value.length);

				uni.hideLoading();
				uni.showToast({
					title: "加载成功",
					icon: "success"
				});
			},

			fail: res => {
				console.log("~~~加载数据失败：", res);
				uni.hideLoading();
				uni.showToast({
					title: "加载失败",
					icon: 'error'
				});
				isLoading.value = false;
				isHasMore.value = false;
				isEmpty.value = true;
			},

			complete: () => {
				uni.hideNavigationBarLoading();
				uni.stopPullDownRefresh();
			}
		})
	};

	// 
	const onRefresh = () => {
		console.log("~~~刷新数据");
		dataList.value = [];
		page.value = 1;
		isHasMore.value = true;
		getData();
	};

	// 
	const onTopBack = () => {
		console.log("~~~回到顶部");
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 1000
		});
	};
</script>


<style lang="scss" scoped>
	@use "index.scss";
</style>